import React from 'react'
import {
    message,
    Modal
} from 'antd'
import SearchBar from '../../components/SearchBar'
import Table from '../../components/Table'
import 'whatwg-fetch'
import API from '../../axios/api'
import {UserType} from "../../utils/system-data";
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
const confirm = Modal.confirm


let columns = [
    { dataIndex: 'UserName', title: '申请人姓名', width: 100 },
    { dataIndex: 'HallName', title: '班级名称', width: 200,},
    { dataIndex: 'Phone', title: '联系电话', width: 200,},
    { dataIndex: 'Address', title: '班级地址', width: 300,},
]
@withRouter @inject('appStore') @observer
class Hall extends React.Component {
    constructor(props) {
        super(props)
        const {user, rudder, rudderList,defaultrudderId,defaultrudderName} = props.appStore
        this.state = {
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
            addUserShow:false,
            addUserShowItem:false,
            itemInfo:{},
            initHallList:[],
            initUserList:[],
            initUserListItem:[],
            Page: 1,
            Pages:1,
            RudderId:defaultrudderId,
            defaultrudderName:defaultrudderName,
            HallName:'',
            edititem:{},
            HallAuditStatus:1,
            HallAuditStatusList:[{
                mean:'未审核',value:1
            },{
                mean:'已拒绝',value:2
            },{
                mean:'已通过',value:3
            }]
        }
    }

    componentWillReceiveProps(nextProps){
        let {user, rudder, rudderList,defaultrudderId,defaultrudderName} = this.props.appStore
         this.setState({
             user: user,
             rudder: rudder,
             rudderList: rudderList,
             RudderId:defaultrudderId,
             defaultrudderName:defaultrudderName,
         })
     }
    

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async (searchFields) => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
            HallAuditStatus: searchFields && searchFields.HallAuditStatus ? searchFields.HallAuditStatus : this.state.HallAuditStatus,
            RudderId: searchFields && searchFields.RudderId ? searchFields.RudderId : this.state.RudderId,
        }
        await API.GetHallAuditApplyPages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentDidMount() {
        this.fetchTableData()
    }

    onSearch = (searchFields) => {

        if(searchFields.RudderId){
            this.setState({
                RudderId:searchFields.RudderId
            })
        }
        if(searchFields.HallAuditStatus){
           this.setState({
                HallAuditStatus:searchFields.HallAuditStatus
            })
        }

        this.setState({
            HallName:searchFields.HallName,
            Page:1,
        },()=>{
            this.fetchTableData(searchFields)
        })
       
    }

    searchFields = () => {
        let fields = [{
                title: '审核状态',
                key: 'HallAuditStatus',
                type: 'select',
                defaultValue: 1,
                items: () => this.state.HallAuditStatusList,
            }]
            // if(this.state.user && this.state.user.UserRankType === UserType.ADMIN  || this.state.user.RudderId == "-"){
            //     fields = [{
            //         title: '分舵名称',
            //         key: 'RudderId',
            //         type: 'select',
            //         defaultValue: this.state.defaultrudderName,
            //         items: () => this.state.rudderList,
            //     },].concat(fields)
            // }
        return fields
    }

    tableAction = (actionKey, item) => {
        if (actionKey === 'ok') {
            console.log(item)
           confirm({
                title: '提示',
                content: '确定通过  '+ item.UserName+'  的申请吗？',
                onOk: () => {
                    let params = {
                        "HallApplyId": item.Id,
                        "HallAuditStatus": 3
                    }
                   API.AuditHallApply(params).then((res) => {
                        if(res.Code === 200) message.success('操作成功')
                        else message.error(res.Message)
                           this.fetchTableData()
                    })
                },
                onCancel() {}
            })
        } else if (actionKey === 'no') {
            confirm({
                title: '提示',
               content: '确定拒绝  '+ item.UserName+'  的申请吗？',
                onOk: () => {
                    let params = {
                        "HallApplyId": item.Id,
                        "HallAuditStatus": 2
                    }
                    API.AuditHallApply(params).then((res) => {
                        if(res.Code === 200) message.success('操作成功')
                        else message.error(res.Message)
                           this.fetchTableData()
                    })
                },
                onCancel() {}
            })
        }
    }
    initHallList =  async (rudderId) => {
        let params = {
            ...API.config,
            RudderId:  rudderId || this.state.rudder.value,
        }
        await API.fetchHallPages(params).then((res) => {
            let initHallList = []
            if(res.Code === 200) {
                res.Data.List && res.Data.List.map(item => initHallList.push({value: item.Id, mean: item.HallName}))
                this.setState({
                    initHallList
                })
            }
        })
    }

    initUserList =  async (rudderId) => {
        let params = {
            ...API.config,
            RudderId: rudderId || this.state.rudder.value ,
            RankType: -1,
        }
        await API.fetchUserPages(params).then((res) => {
            let _initUserList = []
            if(res.Code === 200) {
                res.Data.List && res.Data.List.map(item => _initUserList.push({value: item.UserId, mean: item.NickName}))
                this.setState({
                    initUserList: _initUserList
                })
            }
        })
    }

    initUserListItem = async (rudderId) => {
        let params = {
            ...API.config,
            RudderId: rudderId || this.state.rudder.value ,
            RankType: -1,
        }
        await API.fetchUserPages(params).then((res) => {
            let _initUserList = []
            if(res.Code === 200) {
                res.Data.List && res.Data.List.map(item => _initUserList.push({value: item.UserId, mean: item.NickName}))
                this.setState({
                    initUserListItem: _initUserList
                })
            }
        })
    }


    render() {
        return (
            <div id="wrap">
            {
                 ( <SearchBar
                    onSubmit={this.onSearch}
                    fields={this.searchFields()}
                />)

            }
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            scroll={{y: 385 }}
                            action={row => [
                                { key: 'ok', name: '通过', color: 'blue', icon: 'check',hidden:row.AuditStatus != 1},
                                { key: 'no', name: '拒绝', color: 'red', icon: 'close',hidden:row.AuditStatus != 1},
                            ]}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                </div>
            </div>
        )
    }
}
export default Hall
